<template>
  <div class="images">
    <div class="title">{{ title }}<span v-if="images.length === 0" style="font-size:15px;color:#bbb;">（暂无图片）</span></div>
    <el-row :gutter="20">
      <el-col :span="span">
        <div
          v-for="item of images"
          :key="item.id"
          class="image-wrapper"
        >
          <el-image
            slot="reference"
            :src="item.url"
            class="image"
            :preview-src-list="imgArr"
          >
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
          <el-button
            class="btn"
            type="primary"
            size="small"
            @click.stop="deleteImage(item.id)"
          >
            删除图片
          </el-button>
        </div>
      </el-col>
      <el-col :span="span">
        <div class="add-image">
          <el-upload
            v-if="images.length < 9"
            class="upload"
            :action="uploadFileUrl"
            :data="params"
            :limit="9"
            :show-file-list="false"
            :auto-upload="true"
            :on-success="handleSuccess"
          >
            <i class="el-icon-picture" />
            <span>上传图片</span>
          </el-upload>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import store from '@/store'

export default {
  name: 'ImageUpload',
  props: {
    span: {
      type: Number,
      required: true
    },
    images: {
      type: Array,
      required: true
    },
    params: {
      type: Object,
      required: true
    },
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      visible: false,
      dialogImageUrl: '',
      uploadFileUrl: store.getters.uploadFileUrl
    }
  },
  computed: {
    imgArr() {
      return this.images.map(item => {
        return item.url
      })
    }
  },
  methods: {
    // viewImage(image) {
    //   this.dialogVisible = true
    //   this.dialogImageUrl = image
    // },
    deleteImage(id) {
      this.$confirm('确定删除此张图片吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.$emit('delete-image', id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    handleSuccess(response, file, fileList) {
      this.$emit('upload-image-success', response.fileName)
    }
  }
}
</script>

<style scoped lang="scss">
.image-wrapper {
  position: relative;
  margin-bottom: 20px;
  .btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
}

.add-image {
  color: #999;
  cursor: pointer;
  > .upload {
    width: 100%;
    height: 200px;
    border-radius: 4px;
    background-color: #dedede;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: lighter;
  }
  &:hover {
    color: rgb(24,144,255);
  }
}

.image {
  width:100%;
  height:220px;
  box-shadow: 0 5px 5px 0 #999;
  border-radius: 5px;
  // margin-right: 20px;
  // margin-bottom: 20px;
}

.images > .title {
  font-weight: bolder;
  margin: 20px 0 15px;
}

</style>
